<template>
  <div class="manager-task">
    <div class="select-box">
      <el-input v-model="searchName" clearable="ture" placeholder="报修人" />
      <el-date-picker v-model="searchDate" type="date" placeholder="订单日期" />
      <el-button type="primary" icon="search" @click="load">搜索</el-button>
      <el-select v-model="nowState" placeholder="全部" style="width: 240px" @change="load">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
          :disabled="item.disabled" />
      </el-select>
    </div>
    <div class="table-box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="num" label="编号" width="180" />
        <el-table-column prop="date" label="时间" width="180" />
        <el-table-column prop="position" label="地点" />
        <el-table-column prop="name" label="报修人" />
        <el-table-column prop="state" label="状态" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="text" v-if="row.state === '待处理' || row.state === '处理中'" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" v-else-if="row.state === '已完成'" @click="handleDetails(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-box">
      <el-pagination v-model:current-page="pageNumber" v-model:page-size="pageSize" :page-sizes="[2, 5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
  <EditTask ref="editTask" @task-edit-success="load" />
  <DetailsTask ref="detailsTask" />
</template>

<script>
import moment from 'moment';
import EditTask from '@/components/EditTask.vue';
import DetailsTask from '@/components/DetailsTask.vue';
import { ElMessage } from 'element-plus'
import api from '@/api/axiosConfig';

export default {
  name: 'ManagerTask',
  components: {
    EditTask,
    DetailsTask,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageNumber: 1,
      pageSize: 5,
      searchName: null,
      searchDate: null,
      nowState: 0,
      options: [
        { value: 0, label: '待处理', disabled: false },
        { value: 1, label: '处理中', disabled: false },
        { value: 2, label: '已完成', disabled: false },
        { value: 3, label: '全部', disabled: false }
      ],
      dialogVisible: false,
    }
  },
  methods: {
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNumber) {
      this.pageNumber = pageNumber
      this.load()
    },
    formatDate(date) {
      return moment(date).format('YYYY-MM-DD');
    },
    ChangeState(state) {
      if (state == 0) {
        return "待处理"
      }
      else if (state == 1) {
        return "处理中"
      }
      else if (state == 2) {
        return "已完成"
      }
      else {
        return "未知状态"
      }
    },
    handleEdit(row) {
      this.dialogVisible = true
      this.$refs.editTask.setRow(row)
    },
    handleDetails(row) {
      this.$refs.detailsTask.setRow(row)
    },
    load() {
      if (this.nowState == 3) {
        this.nowState = null
      }
      if (this.searchDate)
        this.searchDate = this.formatDate(this.searchDate)
      console.log(this.searchName, this.searchDate, this.nowState)
      api.get('/task/page', {
        params: {
          pageNum: this.pageNumber,
          pageSize: this.pageSize,
          name: this.searchName,
          date: this.searchDate,
          state: this.nowState,
        },
        headers: {
          'Authorization': `Bearer ${this.$store.getters['token/getToken']}`
        }
      })
        .then(res => {
          console.log(res.data)
          this.tableData = res.data.records
          this.tableData.forEach(item => {
            item.date = this.formatDate(item.date)
            item.state = this.ChangeState(item.state)
          })
          this.total = res.data.total
        })
        .catch(err => {
          console.log(err)
          ElMessage({
            message: '加载失败',
            type: 'warning',
          })
        })
    },
  },
  created() {
    this.load()
  }
};

</script>

<style scoped>
.select-box {
  display: flex;

  .el-input {
    width: 200px;
    margin-right: 10px;
  }

  .el-date-picker {
    width: 200px;
    margin-right: 10px;
  }

  .el-button {
    margin-left: 10px;
  }

  .el-select {
    width: 200px;
    margin-left: 50px;
  }
}

.table-box {
  margin-top: 10px;
  position: f;
}

.pagination-box {
  margin-top: 10px;
  text-align: right;
}
</style>
